.dn_pin_top_bar {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  /* background-color: rgb(30, 30, 30); */
  background-color: rgb(145, 34, 34);
  padding: 10px;
  box-sizing: border-box;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.7);
}

/* ! important - might not be used because of confusing pinterest terms and guidelines */
/* red color might be standing out too much and white is not fitting really well */
.dn_pinterest_icon {
  width: 35px;
  height: 35px;
  color: rgb(182, 39, 39);
  margin-right: 10px;
  margin-top: -5px;
  /* margin-bottom: -5px; */
}

.dn_username_wrapper {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.dn_username_input {
  padding: 5px 15px 5px 5px;
  border: 1px solid transparent;
  /* border-radius: 4px; */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
  background-color: #222222;
  color: #cecece;
  font-size: 14px;
  width: 300px;
  transition: border 0.3s ease, background-color 0.5s ease;
  &:focus {
    /* box-shadow: inset 0 2px 4px rgba(155, 155, 155, 0.3); */
    background-color: #2a2a2a;
    outline: none;
    border: 1px solid #b3b3b3;
  }
}

.dn_search_icon {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #5e5e5e;
  transition: color 0.3s ease;
  &:hover {
    color: #bbbbbb;
  }
  & svg {
    width: 24px;
    height: 24px;
  }
}
